<template>
  <div class="content-block">
    <div class="info-head">{{ title }}</div>
    <div class="info-content">
      <v-chart
        ref="chart"
        :option="chartOption" style="width:100%;height:500px;"
        :theme="chartTheme" autoresize
      ></v-chart>
    </div>
  </div>
</template>

<script>
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';
import BarClickListener from '@/mixins/bar-click-listener'
import { defaultNumber } from '@/utils';
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'grid-item-three',
  mixins: [BarClickListener, MixinChartOptionToolbox, MixinVchartTheme],
  props: {
    data: {
      type: Object,
      default () {
        return {};
      }
    },
  },
  data () {
    return {
      dataViewFirstCellName: '区域'
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    title () {
      return this.data.name || '';
    },
    serie () {
      return (this.data.series && this.data.series[0]) || {};
    },
    chartOption () {
      return {
        color: this.themeColor,
        tooltip: {
          trigger: 'item',
          valueFormatter: value => `${defaultNumber(value)} ${this.serie.unit}`
        },
        toolbox: this.chartOptionToolbox,
        yAxis: {
          type: 'value',
          name: this.serie.unit,
        },
        xAxis: {
          type: 'category',
          data: this.data.xaxis.data || [],
          axisLabel: {
            interval: 0,
          },
        },
        series: [
          {
            type: 'bar',
            // data: (this.data.xaxis.data || []).map((name, index) => ({
            //   name,
            //   value: this.serie.data[index] || null
            // }))
            name: '能源消耗量',
            data: this.serie.data || []
          }
        ]
      }
    }
  },
}
</script>
